<template>
    <view class="OrderDetailsBox">
        <cu-custom isBack="true" fh-color="black">
            <template slot="backText" v-if="OrderDetails.orderStatus === 20">订单已取消</template>
            <template slot="backText" v-if="OrderDetails.orderStatus === 28">等待付款</template>
            <template slot="backText" v-if="OrderDetails.orderStatus === 29">等待平台发货</template>
            <template slot="backText" v-if="OrderDetails.orderStatus === 30">平台已发货</template>
            <template slot="backText" v-if="OrderDetails.orderStatus === 40">订单已完成</template>
            <template slot="backText" v-if="OrderDetails.orderStatus === 130">已退款</template>
        </cu-custom>
        <view class="bg" v-if="OrderDetails.orderStatus === 20"
              :style="{backgroundImage: `url(${imgUrl + '/static/Order/OrderDetails/BgImage/OrderStatus-cancelled.png'})`}"></view>
        <view class="bg" v-if="OrderDetails.orderStatus === 28"
              :style="{backgroundImage: `url(${imgUrl + '/static/Order/OrderDetails/BgImage/OrderStatus-ToBePaid.jpg'})`}">
        </view>
        <view class="bg" v-if="OrderDetails.orderStatus === 29"
              :style="{backgroundImage: `url(${imgUrl + '/static/Order/OrderDetails/BgImage/OrderStatus-GoodsToBeShipped.jpg'})`}">
        </view>
        <view class="bg" v-if="OrderDetails.orderStatus === 30"
              :style="{backgroundImage: `url(${imgUrl + '/static/Order/OrderDetails/BgImage/OrderStatus-shipped.jpg'})`}">
        </view>
        <view class="bg" v-if="OrderDetails.orderStatus === 40||OrderDetails.orderStatus === 130"
              :style="{backgroundImage: `url(${imgUrl + '/static/Order/OrderDetails/BgImage/OrderStatus-HaveCompleted.jpg'})`}">
        </view>
        <scroll-view :scroll-y="true" :style="{height:height-CustomBar - 60 +'px'}" class="OrderStatusAndAddress"
                     :class="{OrderStatusAndAddressYs:OrderDetails.orderStatus !== 30 || OrderDetails.orderStatus !== 28}">
            <view class="Address">
                <view class="AddressLeft">
                    < img :src="imgUrl + gameDetailsData.Order.Address" alt="" class="AddressLeftImage"/>
                </view>
                <view class="AddressRight">
                    <view class="AddressRightTop">
                        <view class="NameAndPhoneNumber">
                            <view class="NameArea"> {{ OrderDetails.receiverName }}</view>
                            <view class="PhoneNumber"> {{ OrderDetails.receiverTel }}</view>
                        </view>
                    </view>
                    <view class="AddressRightBottom">
                        {{ OrderDetails.receiverDetail }}
                    </view>
                </view>
            </view>
            <view class="CommodityInformation">
                <view class="CommodityList" v-for="(item, index) in OrderDetails.orderGoodsDetailVo" :key="index">
                    <view class="ListItemLeft">
                        <view class="pic">
                            < img :src="item.previewImg" alt="" class="Image"/>
                        </view>
                        <view class="NameAndSpecification">
                            <view class="Name">{{ item.goodsName }}</view>
                            <view class="Specification">{{ item.specificationName }}</view>
                        </view>
                    </view>

                    <view class="PriceAndCount">
                        <view class="Price">
                            <view class="RMB">￥</view>
                            <view class="priceNum">{{ item.goodsPrice }}</view>
                        </view>
                        <view class="Count">x{{ item.goodsNum }}</view>
                    </view>


                </view>
            </view>

            <view class="OrderInformation">
                <view class="TotalPrice InfoItem">
                    <view class="TotalPirceLeft InfoTitle">订单总额</view>
                    <view class="TotalPirceRight InfoContent">¥&nbsp;&nbsp;{{ OrderDetails.orderPrice }}</view>
                </view>
                <view class="OrderNumber InfoItem">
                    <view class="OrderNumberLeft InfoTitle">订单编号</view>
                    <view class="OrderNumberRight InfoContent">{{ OrderDetails.orderCode }}</view>
                </view>
                <view class="OrderTime InfoItem">
                    <view class="OrderTimeLeft InfoTitle">创建时间</view>
                    <view class="OrderTimeRight InfoContent">{{ OrderDetails.createTime }}</view>
                </view>
                <view class="OrderNote InfoItem">
                    <view class="OrderNoteLeft InfoTitle">订单备注</view>
                    <view class="OrderNoteRight InfoContent">{{ OrderDetails.remark }}</view>
                </view>
            </view>

            <view class="PaymentInformationTitle" v-if="OrderDetails.payInfoStatus === true">付款信息</view>
            <view class="PaymentInformation" v-if="OrderDetails.payInfoStatus === true">
                <view class="MethodOfPayment infoItem">
                    <view class="MethodOfPaymentLeft infoItemTitle">支付方式</view>
                    <view class="MethodOfPaymentRight">{{ realPayTypeList[OrderDetails.realPayType] }}</view>
                </view>
                <view class="ProofOfPayment infoItem">
                    <view class="ProofOfPaymentLeft infoItemTitle">付款凭证</view>
                    <view class="ProofOfPaymentRight">
                        <image v-for="(item,index) in OrderDetails.realPayImgUrl" :key="index" :src="item"
                               class="ProofOfPaymentImage"></image>
                    </view>
                </view>
                <view class="OrderNote infoItem">
                    <view class="OrderNoteLeft infoItemTitle">订单备注</view>
                    <view class="OrderNoteRight">{{ OrderDetails.realRemark ? OrderDetails.realRemark : '无' }}</view>
                </view>
            </view>
        </scroll-view>
        <view class="ConfimReceiveGoods" v-if="OrderDetails.orderStatus === 30 || OrderDetails.orderStatus === 28">
            <view class="CancelOrderBtn" @click.stop="CancelOrder(OrderDetails.orderCode)"
                  v-if="OrderDetails.orderStatus === 28">取消订单
            </view>
            <view class="ReceiveGoodsBtn" @click="ReceiveGoods(OrderDetails.orderCode)"
                  v-if="OrderDetails.orderStatus === 30">
                确认收货
            </view>
            <view class="ReceiveGoodsBtn" @click.stop="pay(OrderDetails)" v-if="OrderDetails.orderStatus === 28">立即支付
            </view>

        </view>
    </view>
</template>

<script>
import gameDetails from "@/static/lib/public.js";

export default {

    data() {
        return {
            CustomBar: this.CustomBar,
            height: '',

            imgUrl: this.$http.imgUrl,

            gameDetailsData: gameDetails,

            CommodityList: [],

            OrderCode: "",

            OrderDetails: {},

            realPayTypeList: {
                1: '微信',
                2: '支付宝',
                3: '银行卡',
                4: '其他'
            }
        };
    },
    onLoad({
               id
           }) {
        this.height = uni.getSystemInfoSync().windowHeight
        this.OrderCode = id;
        this.getOrderInfo();
    },
    methods: {
        // 获取订单详情
        async getOrderInfo() {
            const url = this.api.Order.getOrderDetails;
            const {
                data
            } = await this.$http.get(url, {
                orderCode: this.OrderCode,
            });
            this.OrderDetails = data.data
            this.OrderDetails.realPayImgUrl = JSON.parse(this.OrderDetails.realPayImgUrl)
            console.log(data, 'getOrderInfo');
        },
        // 确认收货
        async ReceiveGoods(id) {
            const url = this.api.Order.ReceiveGoods;
            const res = await this.$http.get(url, {
                orderCode: id,
            });
            if (res.data.code === 200) {
                uni.showToast({
                    title: "确认收货成功",
                    icon: "success",
                });
            }
            uni.navigateBack({})
            // console.log(res.data, "确认收货");
        },
        CancelOrder() {
            uni.showModal({
                title: "确定取消订单吗？",
                success: async (res) => {
                    if (res.confirm) {
                        const url = this.api.Order.CancelOrder
                        const {data} = await this.$http.get(url, {
                            orderCode: this.OrderCode,
                        });
                        if (data.code === 200) {
                            uni.showToast({
                                title: "取消订单成功",
                                icon: "success",
                            });
                            uni.navigateBack({});
                        }
                    }
                },

            })

            // console.log(res.data, "取消订单");
        },

        async pay(item) {
            const that = this
            const urla = that.api.Order.pay;
            let details = await that.$http.post(urla, {
                orderCode: item.orderCode,
                payMode: 1
            })
            let arr = details.data.data
            uni.requestPayment({
                provider: 'wxpay',
                timeStamp: arr.timeStamp,
                nonceStr: arr.nonceStr,
                package: arr.package,
                signType: arr.signType,
                paySign: arr.paySign,
                success: function (res) {
                    console.log('success:' + JSON.stringify(res));
                    uni.showToast({
                        title: '支付成功',
                        icon: 'none'
                    })
                    that.getOrderInfo()
                },
                fail: function (err) {
                    console.log('fail:' + JSON.stringify(err));
                    uni.showToast({
                        title: '取消支付',
                        icon: 'none'
                    })
                }
            });
        }
    },
};
</script>

<style lang="scss" scoped>
.OrderDetailsBox {
  position: relative;

  .bg {
    width: 750rpx;
    height: 100%;
    background-size: 100% 100%;
    position: absolute;
    top: 0;
    z-index: -1;
  }

  .OrderStatusAndAddress {
    margin-left: 26rpx;
    padding-bottom: 120rpx;
    margin-bottom: 120rpx;

    .OrderStatus {
      display: flex;
      height: 30rpx;
      margin-left: 20rpx;

      .TimeIcon {
        width: 44rpx;
        height: 44rpx;
        margin-right: 16rpx;
      }

      .text {
        color: #FFFFFF;
        font-size: 32rpx;
      }
    }

    .Address {
      width: 702rpx;
      height: 138rpx;
      background: #ffffff;
      box-shadow: 0rpx 10rpx 20rpx 2rpx rgba(8, 49, 213, 0.05);
      opacity: 1;
      border-radius: 15rpx;
      margin-top: 24rpx;
      display: flex;
      align-items: center;

      .AddressLeft {
        width: 28rpx;
        height: 36rpx;
        background: #ffffff;
        opacity: 1;
        margin-left: 50rpx;

        .AddressLeftImage {
          width: 100%;
          height: 100%;
        }
      }

      .AddressRight {
        margin-left: 26rpx;

        .AddressRightTop {
          .NameAndPhoneNumber {
            display: flex;
            align-items: center;

            .NameArea {
              font-size: 28rpx;
              font-weight: 500;
              margin-right: 16rpx;
            }

            .PhoneNumber {
              font-weight: 400;
            }
          }
        }

        .AddressRightBottom {
          margin-top: 8rpx;
          color: #000000;
          opacity: 0.4;
        }
      }
    }

    .container {
      position: fixed;
    }

    .CommodityInformation {
      width: 702rpx;
      background-color: #FFFFFF;
      border-radius: 25rpx;
      margin-top: 16rpx;
      padding: 48rpx 32rpx 54rpx 32rpx;

      .CommodityList {
        display: flex;
        margin-bottom: 20rpx;
        color: #333;
        font-size: 28rpx;

        .ListItemLeft {
          display: flex;
          flex: 1;
        }

        &:last-child {
          margin-bottom: 0;
        }

        .pic {
          width: 180rpx;
          height: 180rpx;
          border-radius: 16rpx 16rpx 16rpx 16rpx;
          opacity: 1;
          background-color: #ccc;
          margin-right: 16rpx;

          .Image {
            width: 100%;
            height: 100%;
          }
        }

        .NameAndSpecification {
          margin-left: 20rpx;

          .Name {
            font-size: 28rpx;
            color: #000;
          }

          .Specification {
            height: 56rpx;
            background: rgba(153, 153, 153, 0.12);
            border-radius: 8rpx;
            margin-top: 20rpx;
            text-align: center;
            line-height: 56rpx;
            padding: 0 10rpx;
            color: #666;
            font-size: 24rpx;
          }
        }

        .PriceAndCount {
          display: flex;
          flex-direction: column;
          text-align: end;

          .Price {
            margin-top: 20rpx;
            display: flex;
            align-items: center;
            margin-bottom: 20rpx;


            .priceNum {
              font-size: 32rpx;
            }
          }

          .Count {
            color: #999;
            font-size: 28rpx;
          }
        }

      }
    }

    .OrderInformation {
      width: 702rpx;
      background-color: #FFFFFF;
      border-radius: 25rpx;
      margin-top: 16rpx;
      padding: 28rpx 32rpx;

      .InfoItem {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 40rpx;
        color: #000;
        opacity: 0.4;

        &:last-child {
          margin-bottom: 0;
        }

        .InfoContent {
          color: #333333;
          font-size: 24rpx;
        }
      }


    }

    .PaymentInformationTitle {
      font-size: 28rpx;
      color: #333;
      margin-top: 32rpx;
      margin-bottom: 16rpx;
    }

    .PaymentInformation {
      width: 702rpx;
      background: #FFFFFF;
      box-shadow: 0 8rpx 20rpx 0 rgba(153, 153, 153, 0.12);
      border-radius: 24rpx;
      padding: 32rpx 48rpx 26rpx 24rpx;

      .infoItem {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 26rpx;
        font-size: 24rpx;

        .infoItemTitle {
          color: #999;
        }
      }

      .ProofOfPaymentRight {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .ProofOfPaymentImage {
          width: 120rpx;
          height: 120rpx;
          margin-right: 24rpx;

          &:last-child {
            margin-right: 0;
          }
        }
      }
    }

  }

  .OrderStatusAndAddressYs {
    padding-bottom: 20rpx;
  }

  .ConfimReceiveGoods {
    position: fixed;
    bottom: 0;
    left: 0;
    background-color: #FFFFFF;
    height: 120rpx;
    width: 100%;
    display: flex;
    justify-content: flex-end;
    padding: 0 20rpx;

    view {
      margin-left: 20rpx;
    }

    .ReceiveGoodsBtn {
      width: 232rpx;
      height: 76rpx;
      background: linear-gradient(135deg, #4D8BFF 0%, #78D8FB 100%);
      border-radius: 38rpx;
      font-size: 28rpx;
      font-weight: 500;
      color: #FFFFFF;
      text-align: center;
      line-height: 76rpx;
      margin-top: 20rpx;
    }

    .CancelOrderBtn {
      width: 232rpx;
      height: 76rpx;
      border-radius: 38rpx;
      opacity: 1;
      border: 2rpx solid rgba(153, 153, 153, 0.4);
      line-height: 76rpx;
      text-align: center;
      margin-top: 20rpx;
      font-size: 28rpx;
      font-weight: 400;
      color: #999999
    }
  }
}
</style>